<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test-Binray</title>
</head>
<body>
<div class="div-b">
    <form onsubmit="return false;">
		<textarea id="responseText" style="width: 1200px; height: 700px;"
                  disabled="disabled" readonly="readonly"></textarea>
        <br> <input type="text" name="message" style="width: 180px"
                    value="讲真,一点毛病都没"> <input type="button" value="发送"
                                              onclick="chat(this.form.message.value)"> <input type="button"
                                                                                              onclick="javascript:document.getElementById('responseText').value=''"
                                                                                              value="clear"> <br> <br>
        <input type="text" name="nickname" style="width: 50px" value="玉面小飞龙">
        <input type="button" value="修改昵称"
               onclick="updateName(this.form.nickname.value)">
        <br>
        <input type="text" name="avatar" value="https://mdn.mozillademos.org/files/5397/rhino.jpg">
        <input type="button" value="修改头像"
               onclick="updateAvatar(this.form.avatar.value)">
    </form>
</div>

</body>


<script type="text/javascript">
    function getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var seperator2 = ":";
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = "[" + date.getFullYear() + seperator1 + month
            + seperator1 + strDate + " " + date.getHours() + seperator2
            + date.getMinutes() + seperator2 + date.getSeconds() + "."
            + date.getMilliseconds() + "]";
        return currentdate;
    }

    function log(msg) {
        var ta = document.getElementById('responseText');
        ta.value = ta.value + '\n' + getNowFormatDate() + msg;
        ta.scrollTop = ta.scrollHeight;
    }
</script>


<script type="text/javascript">

    // ArrayBuffer转为字符串，参数为ArrayBuffer对象
    function ab2str(buf) {
        return String.fromCharCode.apply(null, new Uint16Array(buf));
    }

    // 字符串转为ArrayBuffer对象，参数为字符串
    function str2ab(str) {
        var buf = new ArrayBuffer(str.length * 2); // 每个字符占用2个字节
        var bufView = new Uint16Array(buf);
        for (var i = 0, strLen = str.length; i < strLen; i++) {
            bufView[i] = str.charCodeAt(i);
        }
        return buf;
    }

    var buffer = new ArrayBuffer(16);
    var dataView = new DataView(buffer);
    dataView.setInt8(0, 1);
    dataView.setInt32(1, 0xff00000f, true);

    ab2str(buffer);
    for (var i = 0; i < dataView.byteLength; i++) {
        console.log(dataView.getUint8(i));
    }

    function umspLogin() {
        var buffer = new ArrayBuffer(16);
        var dataView = new DataView(buffer);
        dataView.setInt8(0, 1);
        dataView.setInt32(1, 0xff00000f, true);
        return buffer;
    }

    var socket;
    if (!window.WebSocket) {
        window.WebSocket = window.MozWebSocket;
        log("use MozWebSocket!");
    }
    if (window.WebSocket) {
        // var host = window.location.host;
        // var host = "sdk.matchvs.com:12345";
        var host = "127.0.0.1:12345";
        socket = new WebSocket("ws://" + host + "/ws");
        socket.onmessage = function (event) {
            log("recv:" + event.data);
            var reader = new FileReader();
            reader.readAsArrayBuffer(event.data);
            //  当读取操作成功完成时调用.
            reader.onload = function(evt){
                if(evt.target.readyState === FileReader.DONE){
                    var dataView = new DataView(buffer);
                    log("parse["+dataView.byteLength+"]->" +  ab2str(buffer));
                    //TODO callback
                }else{
                    log("[err]parse fail");
                }

            }

        };
        socket.onopen = function (event) {

            log("connect success !");
            socket.send(umspLogin());//login
            log("login...")
        };
        socket.onclose = function (event) {
            log("disconnect");
        };
    } else {
        alert("Not Support the WebSocket！");
    }

    function send(message) {
        if (!window.WebSocket) {
            return;
        }
        if (socket.readyState === WebSocket.OPEN) {
            //log(message);
            socket.send(message);
        } else {
            alert("not connect.");
        }
    }

</script>

</html>